<template>
    <div class="poa loginbody">
        <div @click="quit" class="cuo">
            <div></div>
            <div></div>
        </div>
        <div class="login_body_content">
            <div class="login_body_content_title">
                找回密码
            </div>
            <div class="set_password_little_title">
                输入 <span> {{ email }} </span> 收到的6位验证码
            </div>
            <div class="code_big">
                <input_ @error="code_error" @input="code_input" :text="'输入邮箱验证码'" :rules="'required|minLength:6'" />
                <button ref="login_btn" v-disabled @click="get_code" class="get_code set_password_getcode">获取验证码</button>
            </div>
            <input_ @error="password_error" @input="password_input" :text="'输入新密码'" :rules="'required|minLength:6'" />
            <div class="login_submit">
                <button @click="login_submit" v-botton class="login_btn">注册账号</button>
            </div>
            <MyMessage v-model:flag="alert_flag" :text="error_text" />
        </div>
    </div>
</template>
<script setup>
import { defineEmits, ref, reactive, defineAsyncComponent, defineProps } from 'vue';
import { getCode, set_password } from '../../api/api'
const input_ = defineAsyncComponent(() => import('../common/input_plus.vue'))
const emit = defineEmits(['quit'])
const prop = defineProps(
    {
        email: {
            default: () => ''
        }
    }
)
function quit() {
    emit('quit', 'enroll_succsess')
}
let login_btn = ref()
let alert_flag = ref(false)
let error_text = ref('')
let form = reactive(
    {
        password: '',
        code: '',
    }
)
let error = reactive(
    {
        password_error: '',
        code_error: '',
    }
)
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
function get_code() {
    getCode(`/api/common/user/getCode/${prop.email}`).then(res => {
        if (res.data.code == 200) {
            alertfn('发送成功')
        } else if (res.data.code == "user:email_existed") {
            alertfn('该邮箱已注册')
        } else {
            alertfn('发送失败')
        }
    })
}
function login_submit() {
    if (!form.password || !form.code) {
        alertfn('请填写必填项')
        return
    }
    if (error.password_error) {
        alertfn('密码' + error.password_error)
        return
    }
    if (error.code_error) {
        alertfn('验证码' + error.code_error)
        return
    }
    set_password({
        email: prop.email,
        password: form.password,
        code: form.code,
    }).then(res => {
        if (res.data.code == 200) {
            alertfn('修改密码成功')
            setTimeout(() => {
                emit('set_password_succsess')
                form.password = ''
                form.code = ''
            }, 1000)
        } else {
            alertfn('修改密码失败')
        }
    })
}
function password_error(value) {
    error.password_error = value
}
function code_input(value) {
    form.code = value
}
function password_input(value) {
    form.password = value
}
function code_error(value) {
    error.code_error = value
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.set_password_little_title {
    font-size: r(12);
    color: #74a9e3;
    text-align: center;
    margin-bottom: r(20);

    span {
        color: #face15;
    }
}

.get_code {
    position: absolute;
    top: r(1);
    right: r(1);
    height: r(42);
    width: r(100);
    color: #999;
    font-size: r(12);
    font-weight: bold;
    background: linear-gradient(to top left, #e0e0e0, #f8f8f8);
}

.code_big {
    position: relative;
}

.login_submit {
    width: 100%;
    height: r(44);
    position: relative;
    margin-top: r(10);

    button {
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-color: #fe1e4b;
        color: #ffffff00;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: r(16);
        transition: 0.5s;
        border-radius: r(5);
        color: #fff;
        box-shadow: 0 0 r(6) #fc3058;
    }
}

.last_password {
    font-size: r(10);
    color: #999;
    text-align: right;
    margin-top: r(10);
}

.loginbody {
    padding-top: r(100);
    display: flex;
    justify-content: center;
    position: relative;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6b4bab), to(#bf09db));

    .login_body_content {
        width: 70%;

        .login_body_content_title {
            text-align: center;
            width: 100%;
            font-size: r(22);
            color: #74a9e3;
            margin-bottom: r(20);
        }
    }

    .zhuche {
        position: absolute;
        right: r(20);
        top: r(17);
        font-size: r(16);
        color: #666;
    }

    .cuo {
        position: absolute;
        left: r(20);
        top: r(20);
        width: r(16);
        height: r(16);

        div {
            width: 70%;
            height: r(2);
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        :nth-child(1) {
            transform: translate(-50%, 120%) rotate(30deg);
        }

        :nth-child(2) {
            transform: translate(-50%, -120%) rotate(-30deg);
        }
    }
}
</style>